<template>
  <div id="app">
    <el-upload
      class="upload-demo"
      action="/api/uploadFile/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :file-list="fileList"
      :limit="3"
      multiple
      drag
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-table :data="tableData" border style="width: 100%" empty-text="暂无">
      <el-table-column fixed prop="id" label="序号" width="50"> </el-table-column>
      <el-table-column prop="className" label="班级" width="120"> </el-table-column>
      <el-table-column prop="numbers" label="人数" width="120"> </el-table-column>
      <el-table-column prop="date" label="开班时间" width="120"> </el-table-column>
      <el-table-column prop="dateStart" :formatter="formatDate" label="计划就业起点" width="200"> </el-table-column>
      <el-table-column prop="dateEnd" :formatter="formatDate" label="计划就业完成" width="200"> </el-table-column>
      <el-table-column prop="note" :formatter="formatDate" label="备注" width="400"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      tableData: [
        {
          id: '0',
          className: '前端20班',
          numbers: '30',
          date: '2020年12月25',
          dateStart: '2020年12月25',
          dateEnd: 200333,
          note: 1
        }
      ]
    }
  },
  methods: {
    formatDate(row, column, cellValue, index) {
      return typeof cellValue === 'number' ? this.formatDate2(cellValue, '年') : cellValue
    },
    formatDate2(numb, format = '-') {
      // 时间格式化
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() + ''
      if (format && format.length === 1) {
        return year + format + (month < 10 ? '0' + month : month) + format + (date < 10 ? '0' + date : date)
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    },
    handleSuccess(file, fileList) {
      // 上传成功时 渲染Excel到表格
      this.tableData = this.tableData.concat(fileList.response)
      console.log(this.tableData)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
